<template>
	<m-layout class="farm" title="農場遊戲" color="#fff" gap="0 24" :goBack="false" barBg="unset">
		<view slot="back">
			<m-image2 :size="[64, 64]" src="../../static/images/pages/logo.png" radius="8" />
		</view>
		<view slot="right" @click="Jump('/pages/news/newsList/newsList?&title=' + '平臺公告' + `&typeid=${typeid}`)">
			<m-icon type="notice_white" size="40" />
		</view>
		<m-block class="rewardBox flex-column plr-32 ptb-20">
			<view class="flex-column pt-24 flex-1 fs26">
				<view class="flex-between">
					<view class="flex-1 flex fs30">
						<m-icon type="guoshi" size="37" />
						<text>累计已收获:</text>
						<view class="flex">
							<text>{{ receiveData.receiveCount }}</text>
							<text class="ml-4">果实</text>
						</view>
					</view>
					<text class="fs21 farmState" :class="[receiveData.state == 1 ? 'text-primary' : 'text-red']">
						{{ receiveData.state == 1 ? '生产中' : '已结束' }}
					</text>
				</view>
			</view>
			<view class="animationBox flex jc-center">
				<m-image src="../../static/images/pages/farm/guoshi.png" :size="[470, 470]"></m-image>
			</view>
			<view class="flex jc-center fs24 mt-12" v-if="receiveData.receiveNext">
				<text>下一次领取:</text>
				<view class="flex">
					<text>{{ receiveData.receiveNext.replace('T', ' ').slice(0, 19) }}</text>
				</view>
			</view>
			<view class="reciveBtn flex jc-center text-white fs26 mt-12" @click="ReceiveFn()">
				<view class="flex" v-if="startTime">
					<mCountDown color="#fff" :timestamp="startTime" />
				</view>
				<view class="flex" v-else>
					<text v-if="receiveData.receive == 1">领取</text>
				</view>
				<text class="ml-8">{{ receiveData.receiveNum }}</text>
				<text class="fs24">果实</text>
			</view>
		</m-block>
		<m-block class="recordBox mt-24 plr-24 ptb-24" bgColor="rgba(255,255,255,0.8)">
			<view class="mb-20">
				<text class="fs26 fw-600">領取記錄</text>
			</view>
			<m-block gap="0 24">
				<template v-for="(item, index) in listArr">
					<view class="li p-12 border-bottom">
						<view class="ptb-8 flex-between">
							<text class="fs26">{{ item.ctime.replace('T', ' ').slice(0, 16) }}</text>
							<view class="flex fs26 ai-baseline">
								<text>{{ item.rewardAmount }}</text>
								<text class="ml-4 fs24">{{ coinConfig[item.rewardCoinid]['coinname'] }}</text>
							</view>
						</view>
					</view>
				</template>
			</m-block>
			<m-loading :list="listArr" :index="pageIndex" :total="pageCount" :loading="isLoading" />
		</m-block>
	</m-layout>
</template>

<script>
import { mapState } from 'vuex';
import { myFruit, Receive } from '@/api/Activetion.js';
import { creditdetal } from '@/api/Trade.js';
import mCountDown from '@/components/m-countdown/index.vue';
export default {
	components: { mCountDown },
	data() {
		return {
			credittype: '41', // 农场收益
			receiveData: {},
			typeid: 1,
			listArr: [],
			pageIndex: 1,
			pageSize: 10,
			pageCount: 1,
			isLoading: false,
			startTime: 0
		};
	},
	onLoad() {
		this.reset();
	},
	computed: {
		...mapState({
			coinConfig: (state) => state.general.coinConfig,
			config: (state) => state.general.config,
			timespan: (state) => state.general.timespan
		})
	},
	onShow() {},
	methods: {
		// 初始化
		reset() {
			this.pageCount = 1;
			this.pageIndex = 1;
			this.receiveDataFn();
			this.getData();
		},
		getTimestamp(timeStr) {
			const timestamp = Math.floor(new Date(timeStr).getTime() / 1000);
			this.startTime = Number(timestamp) - this.timespan;
		},
		async ReceiveFn() {
			if (this.receiveData.receive !== 1) return this.Toast('未到領取時間');
			const { success, msg } = await Receive();
			this.Toast(msg);
			if (!success) return;
			this.reset();
		},
		async receiveDataFn() {
			const { success, msg, data } = await myFruit();
			this.receiveData = data;
			this.getTimestamp(data.receiveNext);
		},
		// 获取转让记录列表
		async getData() {
			if (this.pageIndex > this.pageCount) return;
			this.isLoading = true;
			const { list, pageCount, success } = await creditdetal({
				credittype: this.credittype,
				pageSize: this.pageSize,
				pageIndex: this.pageIndex
			});
			this.isLoading = false;
			this.pageCount = pageCount;
			if (this.pageIndex <= 1) {
				this.listArr = list;
			} else {
				this.listArr = [...this.listArr, ...list];
			}
			this.pageIndex++;
			uni.stopPullDownRefresh();
		}
	},
	onPullDownRefresh() {
		this.reset();
	},
	onReachBottom() {
		this.getData();
		console.log('触底了');
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background: url('../../static/images/pages/farm/farmbg.png') no-repeat;
	background-size: 100% 100%;
	// background-color: #ffd100;
	padding: 0rpx 0rpx;
	box-sizing: border-box;
}
.rewardBox {
	background: url('../../static/images/pages/farm/block_bg.png') no-repeat;
	background-size: 100% 100%;
}
.recordBox {
	// background: url('../../static/images/pages/farm/block_bg.png') no-repeat;
	background-size: 100% 100%;
	min-height: 500rpx;
}
.reciveBtn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(0deg, #3362f9 0%, #48a2ff 100%);
	border-radius: 15rpx;
}
.animationBox {
	margin-top: 20rpx;
	background: url('../../static/images/pages/farm/bg01.png') no-repeat;
	height: 420rpx;
	background-size: 100% 100%;
}
.farmState {
	background: #bfdfff;
	padding: 8rpx 20rpx;
	border-radius: 40rpx;
}
</style>
